<template>
	<view class="warp">
		<view class="header">
			<!-- 头部-默认显示 -->
			<view class="before"
				:style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex, height: height }">
				<view class="back black" @tap="back">
					<u-icon name="arrow-left" size="40" color="#fff"></u-icon>
				</view>
			</view>
			<!-- 头部-滚动渐变显示 -->
			<view class="after" :style="{ opacity: afterHeaderOpacity, zIndex: afterHeaderzIndex, height: height }">
				<view class="center">
					<view class="back" @tap="back">
						<u-icon name="arrow-left" size="50"></u-icon>
					</view>
					<view class="middle u-line-1">{{ data.goods_name }}</view>
				</view>
			</view>
		</view>
		<!-- 商品主图轮播 -->
		<view class="swiper-box">
			<swiper circular="true" autoplay="true" @change="swiperChange">
				<swiper-item v-for="(swiper,index) in swiperList" :key="index">
					<image :src="swiper"></image>
				</swiper-item>
			</swiper>
			<view class="indicator">{{ currentSwiper + 1 }}/{{ swiperList.length }}</view>
		</view>
		<!-- 标题 价格 -->
		<view class="info-box goods-info">
			<view class="other">
				<view class="price">
					<text v-text="data.new_price"></text>
					<text class="old_price">{{data.old_price}}</text>
				</view>
				<text class="vip">会员价:￥<span v-html="data.vip_price"></span></text>
				<view>已售<span v-html="data.sales_sum"></span></view>
			</view>
			<view class="top-box">

				<view class="number" v-if="skuForm.length == 0">
					<text class="text">购买数量</text>
					<u-number-box v-model="quantity" :min="1" :max="data.quantity" />
				</view>
			</view>
			<view class="title">{{ data.goods_name }}</view>
			<view class="subtitle">{{ data.subtitle }}</view>
		</view>
		<!-- 详情 -->
		<view class="description">
			<view class="title">———— 商品详情 ————</view>
			<view class="content">
				<u-parse :html="data.goods_content" :lazy-load="true" :show-with-animation="true"></u-parse>
			</view>
		</view>
		<!-- 底部菜单 -->
		<view class="footer">
			<view class="icons">
				<view class="box" @tap="share">
					<u-icon name="share-fill" size="50" color="#2979ff"></u-icon>
					<view class="text">分享</view>
				</view>
				<view class="box" @tap="$makePhoneCall()">
					<u-icon name="server-man" size="50" color="#aa557f"></u-icon>
					<view class="text">客服</view>
				</view>
				<view class="box" @tap="goCart">
					<u-icon name="shopping-cart-fill" size="50" color="#FFC86A"></u-icon>
					<view class="text">收藏</view>
				</view>
			</view>
			<view class="btn" v-if="data.prom_type == 1">
				<view v-if="data.is_free == 1">
					<view class="addToCart" @tap="alone_buy">
						<view>￥{{data.new_price}}</view>
						<view>立即购买</view>
						</view>
					<view class="buy" @tap="group_buy">0元购</view>
				</view>
				<view v-else>
					<view v-if="data.red_price == 0">
						<view class="buy" @tap="alone_buy">
							<view>￥{{data.new_price}}</view>
							<view>立即购买</view>
						</view>
					</view>
					<view v-else-if="data.red_price > 0">
						<view class="addToCart" @tap="alone_buy">
							<view>￥{{data.new_price}}</view>
							<view>立即购买</view>
						</view>
						<view class="buy" @tap="group_buy">
							<view>￥{{data.red_price}}</view>
							<view>红包购</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn" v-if="data.prom_type == 2">
				<view class="addToCart" @tap="alone_buy">
					<view>￥{{data.new_price}}</view>
					<view>立即购买</view>
				</view>
				<view class="buy" @tap="group_buy">
					<view>￥{{data.group_price}}</view>
					<view>拼团</view>
				</view>
			</view>
			<view class="btn" v-if="data.prom_type == 3">
				<view class="addToCart" @tap="bargain_buy">
					<view>￥{{data.new_price}}</view>
					<view>邀人帮砍</view>
				</view>
			</view>
		</view>
		<sku :show="popupShow" theme-color="#f06c7a" :thumbnail="data.original_img" :type="type" :skuForm="skuForm"
			:skuIds="skuIds" @close="handleClose" @confirm="handleConfirm" v-if="skuForm.length>0"></sku>
	</view>
</template>
<script>
	// #ifdef  H5
	import tools from '@/common/tools.js';
	// #endif
	import sku from '@/components/sku/sku.vue';
	export default {
		components: {
			sku
		},
		data() {
			return {
				is_limit: 0,
				limit_num: 0,
				group_id:0,
				buy_type:6,
				attr_name:'',
				price_id:'',
				goods_count:'',
				price:"0.00",
				goods_spec_list:[],
				show_number: false,
				id: null,
				data: {},
				skuIds: [],
				skuForm: [],
				skuId: null,
				popupShow: false,
				quantity: 1,
				type: 1,
				currentSwiper: 0,
				swiperList: [],
				//控制渐变标题栏的参数
				beforeHeaderzIndex: 11, //层级
				afterHeaderzIndex: 10, //层级
				beforeHeaderOpacity: 1, //不透明度
				afterHeaderOpacity: 0, //不透明度
				height: '100rpx'
			};
		},
		onLoad(options) {
			this.id = options.id || 14;
			this.getGoods();
			// #ifdef  MP
			this.height = uni.getMenuButtonBoundingClientRect().bottom + 4 + 'px'; // 小程序头部高度
			// #endif
		},
		onPageScroll(e) {
			//导航栏渐变
			let tmpY = 375;
			e.scrollTop = e.scrollTop > tmpY ? 375 : e.scrollTop;
			this.afterHeaderOpacity = e.scrollTop * (1 / tmpY);
			this.beforeHeaderOpacity = 1 - this.afterHeaderOpacity;
			//切换层级
			this.beforeHeaderzIndex = e.scrollTop > 0 ? 10 : 11;
			this.afterHeaderzIndex = e.scrollTop > 0 ? 11 : 10;
		},
		// 设置小程序分享参数
		onShareAppMessage() {
			return {
				path: this.data.thumbnail || '',
				title: this.data.goods_name || '',
				imageUrl: `/pages/goods/goods?id=${this.id}`
			};
		},
		methods: {
			checkPrice: function() {
				var goods_spec_list = this.goods_spec_list;
				var buy_type = this.buy_type;
				console.log(goods_spec_list)
				console.log(this.buy_type)
				if (buy_type == 2) {
					this.price = this.data.group_price
				} else if (buy_type == 4) {
					this.price = this.data.red_price
				} else {
					this.price = this.data.new_price
				}
				console.log(this.price)
				var spec = ""
				for (var i = 0; i < this.goods_spec_list.length; i++) {

					for (var j = 0; j < this.goods_spec_list[i].length; j++) {
						if (this.goods_spec_list[i][j].isClick == 1) {
							if (spec == "")
								spec = this.goods_spec_list[i][j].item_id + ''
							else
								spec = spec + "_" + this.goods_spec_list[i][j].item_id
						}
					}
				}

				var specs = spec.split("_");
				for (var i = 0; i < specs.length; i++) {
					specs[i] = parseInt(specs[i])
				}
			 specs.sort(function(a, b) {
					return a - b
				});
				spec = ""
				for (var i = 0; i < specs.length; i++) {
					if (spec == "") {
						spec = specs[i]
					} else {
						spec = spec + "_" + specs[i]
					}
				}

			 var spec_goods_price = this.spec_goods_price;
				for (var i = 0; i < spec_goods_price.length; i++) {
					if (spec_goods_price[i].key == spec) {
						if (buy_type == 2) {
							this.price = spec_goods_price[i].group_price;
						} else if (buy_type == 4) {
							this.price = spec_goods_price[i].red_price;
						} else {
							this.price = spec_goods_price[i].price;
						}

						this.attr_name = '已选' + spec_goods_price[i].key_name;
						this.price_id = spec_goods_price[i].price_id;
						this.goods_count = spec_goods_price[i].store_count;
					}
				}
				this.showP(1)
			},
			//立即购买
			alone_buy: function() {
				setTimeout(function() {
					this.popupShow = true
					this.show_number = true
					this.buy_type = 1
				}, 100)
				console.log(this.$isLogin(true))
				if (this.$isLogin(true)) {
					this.checkPrice();
				}
			},
			//拼团
			group_buy: function() {
				this.popupShow = true
				this.show_number = false
				this.buy_type = 2
				if (this.$isLogin(true)) {
					this.checkPrice();
				}
			},
			//红包兑换
			red_buy: function() {
				this.popupShow = true
				this.show_number = false
				this.buy_type = 4
				if (this.$isLogin(true)) {
					this.checkPrice();
				}
			},
			//0元购
			free_buy: function() {
				this.popupShow = true
				this.show_number = false
				this.buy_type = 5
				if (this.$isLogin(true)) {
					this.checkPrice();
				}
			},
			//砍价
			bargain_buy: function() {
				this.popupShow = true
				this.show_number = false
				this.buy_type = 3
				if (this.$isLogin(true)) {
					this.checkPrice();
				}
			},
			// 隐藏弹窗
			hide_msgbox: function() {
				this.popupShow = false
			},
			getGoods() {
				this.$api.get({
					url: 'portal/shop/shop_details',
					data: {
						goods_id: this.id
					},
					success: res => {
						if (res.code === "10001") {
							let skuForm = []
							let i = 0
							for (var index in res.data.attrNames) {
								skuForm[i] = {
									name: res.data.attrNames[index],
									list: []
								}
								res.data.attrValues.forEach(item => {
									// console.log(item.spec_id)
									if (item.spec_id == index) {
										skuForm[i].list.push({
											key: index + ':' + item.id,
											value: item.item
										})
									}
								})
								i++
							}
							this.skuIds = res.data.skuIds
							this.skuForm = skuForm
							console.log(this.skuIds)
							if (this.skuForm.length === 0) {
								this.skuId = 0
							}
							this.data = res.data;
							this.goods_spec_list = this.data.goods_spec_list
							this.spec_goods_price = res.spec_goods_price
							this.is_limit = this.data.is_limit
							this.limit_num = this.data.limit_num
							this.goods_count = this.data.store_count
							this.swiperList = this.data.swiper_imgs || [];
						} else {
							this.$toast('数据获取失败');
						}
					}
				});
			},
			back() {
				uni.navigateBack();
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			share() {
				// #ifdef  H5
				if (tools.clipboardData(`${this.data.goods_name} ${this.$uniHost}/#/pages/goods/goods?id=${this.id}`)) {
					this.$toast('链接已复制到粘贴板，去分享给好友吧！');
				}
				// #endif
				// #ifdef  APP-PLUS
				plus.share.sendWithSystem({
						content: data.goods_name,
						href: `${this.$uniHost}/#/pages/goods/goods?id=${this.id}`
					},
					function() {
						console.log('分享成功');
					},
					function(e) {
						console.log('分享失败：' + JSON.stringify(e));
					}
				);
				// #endif
			},
			toChat() {
				uni.makePhoneCall({
					phoneNumber: '114' // 客服电话
				});
			},
			goCart() {
				uni.switchTab({
					url: '../cart/cart'
				});
			},
			addToCart() {
				if (this.$isLogin(true)) {
					this.$api.post({
						url: 'order/cart/addToCart',
						data: {
							id: this.id,
							quantity: this.quantity,
							sku_id: this.skuId
						},
						success: res => {
							this.$toast(res.msg);
						}
					});
				}
			},
			buy() {
				console.log(this.buy_type)
				if(this.goods_count == 0) {
					this.$toast('没有库存了');
				}else if(this.quantity > this.goods_count) {
					this.$toast('购买数量大于库存');
				}else {
					if (this.$isLogin(true)) {
						uni.navigateTo({
							url: `../pay/preOrder/preOrder?goods_id=${this.id}&goods_num=${this.quantity}&price_id=${this.price_id}&group_id=${this.group_id}&buy_type=${this.buy_type}`
						});
					}
				}
			},
			showP(type) {
				this.type = Number(type)
				if (this.skuId == 0) {
					if (this.type == 1) {
						this.buy()
					}
					if (this.type == 2) {
						this.addToCart()
					}
				} else {
					this.popupShow = true
				}
			},
			handleClose() {
				this.popupShow = false
			},
			handleConfirm(e) {
				this.popupShow = false
				console.log(e)
				if (e.id) {
					this.skuId = e.id
					this.quantity = e.buyCount
					if (this.type == 1) {
						this.buy()
					}
					if (this.type == 2) {
						this.addToCart()
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.header {
		width: 750rpx;
		display: flex;
		align-items: center;
		/*  #ifdef  MP  */
		align-items: flex-end;
		/*  #endif  */
		position: fixed;
		top: 0;
		z-index: 10;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);

		/*  #endif  */
		.before,
		.after {
			width: 750rpx;
			padding: 0 4%;
			height: 100rpx;
			display: flex;
			align-items: center;
			/*  #ifdef  MP  */
			align-items: flex-end;
			/*  #endif  */
			position: fixed;
			top: 0;
			/*  #ifdef  APP-PLUS  */
			top: var(--status-bar-height);
			/*  #endif  */
			transition: opacity 0.05s linear;
		}

		.center {
			display: flex;
			align-items: center;
			width: 750rpx;
			/*  #ifdef  MP  */
			padding-bottom: 8px;
			width: 520rpx;

			/*  #endif  */
			.back {
				position: absolute;
				left: 20rpx;
			}

			.middle {
				width: 100%;
				padding: 0 40rpx;
				text-align: center;
				font-size: 32rpx;
			}
		}

		.black {
			width: 60rpx;
			height: 60rpx;
			border-radius: 30rpx;
			background: rgba(0, 0, 0, 0.2);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.after {
			background: #fff;
		}
	}

	.swiper-box {
		position: relative;
		width: 750rpx;
		height: 100vw;

		swiper {
			width: 750rpx;
			height: 100vw;

			swiper-item {
				image {
					width: 100%;
					height: 100vw;
				}
			}
		}

		.indicator {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 25rpx;
			height: 40rpx;
			border-radius: 40rpx;
			font-size: 22rpx;
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}

	.info-box {
		width: 750rpx;
		padding: 20rpx 4%;
		background-color: #fff;
	}

	.other {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #969696;
		margin-top: 10rpx;
		margin-bottom: 20rpx;

		.pay-btn {
			box-shadow: 0 7rpx 6rpx 0 rgba(229, 138, 0, .22);
			background: #db3029;
			color: #fff;
		}

		.tool-btn {
			font-size: 28rpx;
			font-weight: 100;
			color: hsla(0, 0%, 100%, .9);
			width: 140rpx;
			min-height: 50rpx;
			border-radius: 35rpx;
			padding: 0;
			margin-right: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.price {
			font-size: 34rpx;
			color: #ff3000;
			font-weight: 600;
		}

		.gold_text {
			line-height: 50rpx;
			height: 50rpx;
			margin-left: 10rpx;
		}

		.gold {
			color: #ff3000;
		}

		.price::before {
			content: "￥";
			font-size: 24rpx;
		}

		.old_price {
			font-size: 26rpx;
			font-weight: 400;
			text-decoration: line-through;
			color: #c4c4c4;
			margin-left: 5rpx;
		}
	}

	.top-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;

		.number {
			display: flex;
			align-items: center;

			.text {
				color: #969696;
				margin-right: 20rpx;
			}
		}


	}

	.goods-info {
		.vip{
			color: #f47925;
			font-size: 30rpx;
			font-weight: 600;
		}
		.price {
			font-size: 46rpx;
			font-weight: 600;
			color: #f47925;
		}

		.title {
			font-size: 32rpx;
			margin: 20rpx 0;
		}

		.subtitle {
			color: #969696;
			margin-top: 10rpx;
		}
	}

	.description {
		margin-bottom: 100rpx;

		.title {
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: #999;
		}
	}

	.footer {
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
		padding: 0 20rpx;
		height: 99rpx;
		border-top: solid 1rpx #eee;
		background-color: #fff;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.icons {
			display: flex;
			margin-right: 30rpx;
			justify-content: space-between;
			align-items: center;
			// flex-grow: 1;
			width: 300rpx;
		}

		.box {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.btn {
			height: 80rpx;
			border-radius: 40rpx;
			overflow: hidden;
			display: flex;
			margin-right: -2%;

			.alone_buy {
				width: 400rpx;
				height: 80rpx;
				padding: 0 40rpx;
				color: #fff;
				font-size: 28rpx;
			}

			.addToCart,
			.buy {
				height: 80rpx;
				padding: 0 40rpx;
				color: #fff;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				flex-direction: column;
			}

			.addToCart {
				background-color: #f0b46c;
			}

			.buy {
				background-color: #f06c7a;
			}
		}
	}
</style>
